<style lang="less" scoped>
.user-index {
    width: 50%;
    padding-left: 2em;
}

.h-title {
    // padding-left: 80px;
    line-height: 5em;
}
</style>
<template>
    <div class="user-index">
        <h4 class="h-title">用户基本信息设置</h4>
        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
            <FormItem label="密码" prop="passwd">
                <Input type="password" v-model="formCustom.passwd"></Input>
            </FormItem>
            <FormItem label="确认密码" prop="passwdCheck">
                <Input type="password" v-model="formCustom.passwdCheck"></Input>
            </FormItem>
            <FormItem label="手机号码" prop="mobile_number">
                <Input type="text" v-model="formCustom.mobile_number" number></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
                <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
export default {
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.formCustom.passwdCheck !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.formCustom.validateField('passwdCheck');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formCustom.passwd) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        const validateMobile = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('号码不能为空'));
            }
            callback();
            

        };

        return {
            formCustom: {
                passwd: '',
                passwdCheck: '',
                mobile_number: ''
            },
            ruleCustom: {
                passwd: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                passwdCheck: [
                    { validator: validatePassCheck, trigger: 'blur' }
                ],
                mobile_number: [
                    { validator: validateMobile, trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.$store.dispatch('userinfo').then(resp => {
            this.formCustom.mobile_number = resp.data.itemMap.user.mobile_number
        })
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$store.dispatch('settings', { password: this.formCustom.passwd, mobile_number: this.formCustom.mobile_number }).then(resp => {
                        this.$Message.success('提交成功!');
                    })

                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        }
    }
}
</script>
